<template>
    <div class="layout-padding">
        <el-form :inline="true" ref="queryRef" :model="queryParams" label-width="120px">
            <el-form-item label="区段：">
                <el-tree-select v-model="queryParams.section" :data="dataSource"
                    :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
                    :render-after-expand="false" check-strictly @change="treeChange">
                </el-tree-select>
            </el-form-item>
            <el-form-item label="工区：">
                <el-tree-select v-model="queryParams.workArea" :data="dataSourceArea"
                    :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
                    :render-after-expand="false" check-strictly>
                </el-tree-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <el-button type="primary" @click="handleExport">导出</el-button>
                <el-button type="primary" @click="handleImport">导入</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="list">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column label="防洪抢修时间" align="center" prop="floodTime" >
                <template #default="scope">
                    {{ handleDate(scope.row.floodTime) }}
                </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="问题" align="center" prop="problem" />
            <el-table-column label="出动人员（人）" align="center" prop="personNum" />
            <el-table-column label="抢修时间（小时）" align="center" prop="repairHour" />

            <el-table-column label="完成项目及使用物资及数量" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">查看</el-button>
                </template>
            </el-table-column>


            <!-- <el-table-column label="完成项目及使用物资及数量" align="center"> -->
            <!-- <el-table-column label="汽车">
                    <el-table-column label="台\次" align="center" prop="consumables1" />
                </el-table-column>
                <el-table-column label="轨道车">
                    <el-table-column label="台\次" align="center" prop="consumables2" />
                </el-table-column>
                <el-table-column label="回填土方">
                    <el-table-column label="m³" align="center" prop="consumables3" />
                </el-table-column>
                <el-table-column label="覆盖彩条布">
                    <el-table-column label="㎡" align="center" prop="consumables4" />
                </el-table-column>
                <el-table-column label="铺设博文排水管φ60cm">
                    <el-table-column label="m" align="center" prop="consumables5" />
                </el-table-column>
                <el-table-column label="轨道车卸土方">
                    <el-table-column label="m³" align="center" prop="consumables6" />
                </el-table-column>
                <el-table-column label="清理水沟淤积">
                    <el-table-column label="m³" align="center" prop="consumables7" />
                </el-table-column>
                <el-table-column label="浆砌片石">
                    <el-table-column label="m³" align="center" prop="consumables8" />
                </el-table-column>
                <el-table-column label="砂浆勾缝">
                    <el-table-column label="㎡" align="center" prop="consumables9" />
                </el-table-column>
                <el-table-column label="砂浆抹面">
                    <el-table-column label="㎡" align="center" prop="consumables10" />
                </el-table-column>
                <el-table-column label="锹">
                    <el-table-column label="把" align="center" prop="consumables11" />
                </el-table-column>
                <el-table-column label="叉">
                    <el-table-column label="把" align="center" prop="consumables12" />
                </el-table-column>
                <el-table-column label="编织袋">
                    <el-table-column label="个" align="center" prop="consumables13" />
                </el-table-column>
                <el-table-column label="麻袋">
                    <el-table-column label="个" align="center" prop="consumables14" />
                </el-table-column>
                <el-table-column label="皮匡">
                    <el-table-column label="个" align="center" prop="consumables15" />
                </el-table-column>
                <el-table-column label="水泥">
                    <el-table-column label="t" align="center" prop="consumables16" />
                </el-table-column>
                <el-table-column label="沙子">
                    <el-table-column label="m³" align="center" prop="consumables17" />
                </el-table-column>
                <el-table-column label="撬棍">
                    <el-table-column label="根" align="center" prop="consumables18" />
                </el-table-column>
                <el-table-column label="捣镐">
                    <el-table-column label="个" align="center" prop="consumables19" />
                </el-table-column>
                <el-table-column label="耙镐">
                    <el-table-column label="个" align="center" prop="consumables20" />
                </el-table-column>
                <el-table-column label="大锤">
                    <el-table-column label="个" align="center" prop="consumables21" />
                </el-table-column>
                <el-table-column label="直捣器">
                    <el-table-column label="台" align="center" prop="consumables22" />
                </el-table-column>
                <el-table-column label="起拨道器">
                    <el-table-column label="台" align="center" prop="consumables23" />
                </el-table-column>
                <el-table-column label="石砟">
                    <el-table-column label="m³" align="center" prop="consumables24" />
                </el-table-column>
                <el-table-column label="水桶">
                    <el-table-column label="个" align="center" prop="consumables25" />
                </el-table-column>
                <el-table-column label="水泥毯" align="center" prop="consumables26" />-->
            <!-- </el-table-column> -->
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 详情对话框 -->
        <el-dialog :title="title" v-model="open" width="900px" append-to-body>
            <el-form ref="configRef" :model="form" :rules="rules" label-width="140px">
                <span>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="防洪抢修时间：" prop="floodTime">
                                <el-date-picker v-model="form.floodTime" placeholder="请输入参数" value-format="YYYY-MM-DD"
                                    type="date" format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地点：" prop="place">
                                <el-input v-model="form.place" placeholder="请输入参数" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="问题：" prop="problem">
                                <el-input v-model="form.problem" type="textarea" placeholder="请输入参数" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="出动人员（人）：" prop="personNum">
                                <el-input v-model="form.personNum" placeholder="请输入参数" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="抢修时间（小时）：" prop="repairHour">
                                <el-input v-model="form.repairHour" placeholder="请输入参数" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </span>
                <el-tag size="large">物资使用详情</el-tag>
                <el-table :data="tableData" style="width: 100%" height="350" border>
                    <el-table-column type="index" width="100" label="序号"></el-table-column>
                    <el-table-column prop="type" label="类型" />
                    <el-table-column prop="unit" label="单位" />
                    <el-table-column label="数量" align="center">
                        <template #default="scope">
                            <el-input v-model="scope.row.num"/>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 导入对话框 -->
        <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
            <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                    <div class="el-upload__tip text-center">
                        <div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div>
                        <span>仅允许导入xls、xlsx格式文件。</span>
                        <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                            @click="importTemplate">下载模板</el-link>
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { listFloodCtrlRecord, getFloodCtrlRecord, addFloodCtrlRecord, updateFloodCtrlRecord, delFloodCtrlRecord } from "@/api/system/repair.js";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
import { getToken } from '@/utils/auth'

/*** 导入参数 */
const upload = reactive({
    // 是否显示弹出层
    open: false,
    // 弹出层标题
    title: '',
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: { Authorization: 'Bearer ' + getToken() },
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + '/sjgtw-emergency/floodCtrlRecord/importData',
})

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        submited: true,
        sectionName: undefined,
        workAreaName: undefined,
        protectionType: undefined
    },
    rules: {
        // section: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
    }
});
const { queryParams, form, rules } = toRefs(data);

const flag = ref(false);

const tableData = ref([
    {
        type: '汽车',
        unit: '台\\次',
        num: '',
    },
    {
        type: '轨道车',
        unit: '台\\次',
        num: '',
    },
    {
        type: '回填土方',
        unit: 'm³',
        num: '',
    },
    {
        type: '覆盖彩条布',
        unit: '㎡',
        num: '',
    },
    {
        type: '铺设博文排水管φ60cm',
        unit: 'm',
        num: '',
    },
    {
        type: '轨道车卸土方',
        unit: 'm³',
        num: '',
    },
    {
        type: '清理水沟淤积',
        unit: 'm³',
        num: '',
    },
    {
        type: '浆砌片石',
        unit: 'm³',
        num: '',
    },
    {
        type: '砂浆勾缝',
        unit: '㎡',
        num: '',
    },
    {
        type: '砂浆抹面',
        unit: '㎡',
        num: '',
    },
    {
        type: '锹',
        unit: '把',
        num: '',
    },
    {
        type: '叉',
        unit: '把',
        num: '',
    },
    {
        type: '编织袋',
        unit: '个',
        num: '',
    },
    {
        type: '麻袋',
        unit: '个',
        num: '',
    },
    {
        type: '皮匡',
        unit: '个',
        num: '',
    },
    {
        type: '水泥',
        unit: 't',
        num: '',
    },
    {
        type: '沙子',
        unit: 'm³',
        num: '',
    },
    {
        type: '撬棍',
        unit: '根',
        num: '',
    },
    {
        type: '捣镐',
        unit: '个',
        num: '',
    },
    {
        type: '耙镐',
        unit: '个',
        num: '',
    },
    {
        type: '大锤',
        unit: '个',
        num: '',
    },
    {
        type: '直捣器',
        unit: '台',
        num: '',
    },
    {
        type: '起拨道器',
        unit: '台',
        num: '',
    },
    {
        type: '石砟',
        unit: 'm³',
        num: '',
    },
    {
        type: '水桶',
        unit: '个',
        num: '',
    },

    {
        type: '水泥毯',
        unit: '',
        num: '',
    }
])

function handleDate(time){
    if(time == null || time == undefined || time == ""){
        return ""
    }else{
        let data = new Date(time)
        let y = data.getFullYear()
        let m = data.getMonth() + 1
        let d = data.getDate()
        return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d)
    }
}

const loading = ref(true);
const list = ref([]);
const total = ref(0);
const open = ref(false);
const title = ref("防洪抢修记录详情");

const uploadFileFlag = ref(false);
const dialogImageUrl = ref("");
const ImageUrlList = ref([]);

// 图片
function handleChange(url) {
    console.log(url)
    form.picUrl = url;
}


/** 查询公告列表 */
function getList() {
    loading.value = true;
    listFloodCtrlRecord(queryParams.value).then(response => {
        list.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}


/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}



/** 新增按钮操作 */
function handleAdd() {
    
    reset();
    open.value = true;
    uploadFileFlag.value = true;
    title.value = "添加";
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    const id = row.id;
    getFloodCtrlRecord(id).then(response => {
        form.value = response.data;
        formatFormToTable(form)
        open.value = true;
        flag.value = true;
        title.value = "防洪抢修记录详情";
    });

}

// 完成项目及使用物资及数量编辑
function handleEdit(row) {
    reset();
    const id = row.id;
    getFloodCtrlRecord(id).then(response => {
        form.value = response.data;
        formatFormToTable(form)
        open.value = true;
        flag.value = false;
        title.value = "防洪抢修记录详情";
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const id = row.id;
    proxy.$modal.confirm('是否确认删除区段id为"' + id + '"的数据项？').then(function () {
        return delFloodCtrlRecord(id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}

/** 表单重置 */
function reset() {
    form.value = {
        floodTime: "",
        place: "",
        problem: "",
        personNum: "",
        repairHour: "",
    }
    // form.value = {
    //     sectionName: undefined,
    //     workAreaName: undefined,
    // };
    proxy.resetForm("configRef");
    tableData.value = [
    {
        type: '汽车',
        unit: '台\\次',
        num: '',
    },
    {
        type: '轨道车',
        unit: '台\\次',
        num: '',
    },
    {
        type: '回填土方',
        unit: 'm³',
        num: '',
    },
    {
        type: '覆盖彩条布',
        unit: '㎡',
        num: '',
    },
    {
        type: '铺设博文排水管φ60cm',
        unit: 'm',
        num: '',
    },
    {
        type: '轨道车卸土方',
        unit: 'm³',
        num: '',
    },
    {
        type: '清理水沟淤积',
        unit: 'm³',
        num: '',
    },
    {
        type: '浆砌片石',
        unit: 'm³',
        num: '',
    },
    {
        type: '砂浆勾缝',
        unit: '㎡',
        num: '',
    },
    {
        type: '砂浆抹面',
        unit: '㎡',
        num: '',
    },
    {
        type: '锹',
        unit: '把',
        num: '',
    },
    {
        type: '叉',
        unit: '把',
        num: '',
    },
    {
        type: '编织袋',
        unit: '个',
        num: '',
    },
    {
        type: '麻袋',
        unit: '个',
        num: '',
    },
    {
        type: '皮匡',
        unit: '个',
        num: '',
    },
    {
        type: '水泥',
        unit: 't',
        num: '',
    },
    {
        type: '沙子',
        unit: 'm³',
        num: '',
    },
    {
        type: '撬棍',
        unit: '根',
        num: '',
    },
    {
        type: '捣镐',
        unit: '个',
        num: '',
    },
    {
        type: '耙镐',
        unit: '个',
        num: '',
    },
    {
        type: '大锤',
        unit: '个',
        num: '',
    },
    {
        type: '直捣器',
        unit: '台',
        num: '',
    },
    {
        type: '起拨道器',
        unit: '台',
        num: '',
    },
    {
        type: '石砟',
        unit: 'm³',
        num: '',
    },
    {
        type: '水桶',
        unit: '个',
        num: '',
    },

    {
        type: '水泥毯',
        unit: '',
        num: '',
    }
]
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["configRef"].validate(valid => {
        if (valid) {
            formatTableToForm()
            if (form.value.id != undefined) {
                updateFloodCtrlRecord(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addFloodCtrlRecord(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

// 表格转表单
function formatTableToForm() {
    tableData.value.forEach(item => {
        if (item.type === "汽车") {
            form.value.consumables1 = item.num
        } else if (item.type === "轨道车") {
            form.value.consumables2 = item.num
        } else if (item.type === "回填土方") {
            form.value.consumables3 = item.num
        } else if (item.type === "覆盖彩条布") {
            form.value.consumables4 = item.num
        } else if (item.type === "铺设博文排水管φ60cm") {
            form.value.consumables5 = item.num
        } else if (item.type === "轨道车卸土方") {
            form.value.consumables6 = item.num
        } else if (item.type === "清理水沟淤积") {
            form.value.consumables7 = item.num
        } else if (item.type === "浆砌片石") {
            form.value.consumables8 = item.num
        } else if (item.type === "砂浆勾缝") {
            form.value.consumables9 = item.num
        } else if (item.type === "砂浆抹面") {
            form.value.consumables10 = item.num
        } else if (item.type === "锹") {
            form.value.consumables11 = item.num
        } else if (item.type === "叉") {
            form.value.consumables12 = item.num
        } else if (item.type === "编织袋") {
            form.value.consumables13 = item.num
        } else if (item.type === "麻袋") {
            form.value.consumables14 = item.num
        } else if (item.type === "皮匡") {
            form.value.consumables15 = item.num
        } else if (item.type === "水泥") {
            form.value.consumables16 = item.num
        } else if (item.type === "沙子") {
            form.value.consumables17 = item.num
        } else if (item.type === "撬棍") {
            form.value.consumables18 = item.num
        } else if (item.type === "捣镐") {
            form.value.consumables19 = item.num
        } else if (item.type === "耙镐") {
            form.value.consumables20 = item.num
        } else if (item.type === "大锤") {
            form.value.consumables21 = item.num
        } else if (item.type === "直捣器") {
            form.value.consumables22 = item.num
        } else if (item.type === "起拨道器") {
            form.value.consumables23 = item.num
        } else if (item.type === "石砟") {
            form.value.consumables24 = item.num
        } else if (item.type === "水桶") {
            form.value.consumables25 = item.num
        } else if (item.type === "水泥毯") {
            form.value.consumables26 = item.num
        }
    })
}

// 表格转表单
function formatFormToTable(form) {
    tableData.value.forEach(item => {
        if (item.type === "汽车") {
            item.num = form.value.consumables1
        } else if (item.type === "轨道车") {
            item.num = form.value.consumables2
        } else if (item.type === "回填土方") {
            item.num = form.value.consumables3
        } else if (item.type === "覆盖彩条布") {
            item.num = form.value.consumables4
        } else if (item.type === "铺设博文排水管φ60cm") {
            item.num = form.value.consumables5
        } else if (item.type === "轨道车卸土方") {
            item.num = form.value.consumables6
        } else if (item.type === "清理水沟淤积") {
            item.num = form.value.consumables7
        } else if (item.type === "浆砌片石") {
            item.num = form.value.consumables8
        } else if (item.type === "砂浆勾缝") {
            item.num = form.value.consumables9
        } else if (item.type === "砂浆抹面") {
            item.num = form.value.consumables10
        } else if (item.type === "锹") {
            item.num = form.value.consumables11
        } else if (item.type === "叉") {
            item.num = form.value.consumables12
        } else if (item.type === "编织袋") {
            item.num = form.value.consumables13
        } else if (item.type === "麻袋") {
            item.num = form.value.consumables14
        } else if (item.type === "皮匡") {
            item.num = form.value.consumables15
        } else if (item.type === "水泥") {
            item.num = form.value.consumables16
        } else if (item.type === "沙子") {
            item.num = form.value.consumables17
        } else if (item.type === "撬棍") {
            item.num = form.value.consumables18
        } else if (item.type === "捣镐") {
            item.num = form.value.consumables19
        } else if (item.type === "耙镐") {
            item.num = form.value.consumables20
        } else if (item.type === "大锤") {
            item.num = form.value.consumables21
        } else if (item.type === "直捣器") {
            item.num = form.value.consumables22
        } else if (item.type === "起拨道器") {
            item.num = form.value.consumables23
        } else if (item.type === "石砟") {
            item.num = form.value.consumables24
        } else if (item.type === "水桶") {
            item.num = form.value.consumables25
        } else if (item.type === "水泥毯") {
            item.num = form.value.consumables26
        }
    })
}


/** 导出按钮操作 */
function handleExport() {
    proxy.download("sjgtw-emergency/floodCtrlRecord/export", {
        ...queryParams.value
    }, `防洪抢修记录${new Date().getTime()}.xlsx`);
}

/** 导入按钮操作 */
function handleImport() {
    upload.title = '导入'
    upload.open = true
}

/** 提交上传文件 */
function submitFileForm() {
    proxy.$refs['uploadRef'].submit()
}


/** 下载模板操作 */
function importTemplate() {
    proxy.download('sjgtw-emergency/floodCtrlRecord/downloadTemplate', {}, `template_${new Date().getTime()}.xlsx`)
}

/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
    upload.open = false
    upload.isUploading = false
    proxy.$refs['uploadRef'].handleRemove(file)
    if (response.code == 200) {
        proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })

    } else {
        proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data + '</div>', '导入失败', { dangerouslyUseHTMLString: true })
    }
    getList()
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
    upload.isUploading = true
}


getList();
</script>

<style lang="scss" scoped>
.layout-padding {
    padding: 10px;
}
</style>
